import React, { useState } from 'react'
import { Card, Row, Col, Statistic, Table, Progress, Select, DatePicker, Button } from 'antd'
import { ThunderboltOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
import Layout from '../components/Layout/Layout'

const { RangePicker } = DatePicker
const { Option } = Select

export default function Energy() {
  const [timeRange, setTimeRange] = useState('today')
  const [buildingFilter, setBuildingFilter] = useState('all')

  const energyData = {
    total: 1250.5,
    increase: 8.2,
    buildings: [
      { name: 'A栋办公楼', consumption: 450.2, percentage: 36, trend: 'up', change: 5.2 },
      { name: 'B栋研发楼', consumption: 380.8, percentage: 30, trend: 'down', change: -2.1 },
      { name: 'C栋生产车间', consumption: 280.5, percentage: 22, trend: 'up', change: 12.5 },
      { name: 'D栋仓库', consumption: 139.0, percentage: 11, trend: 'down', change: -1.8 },
    ],
    devices: [
      { name: '空调系统', consumption: 520.3, percentage: 42, status: 'normal' },
      { name: '照明系统', consumption: 187.6, percentage: 15, status: 'normal' },
      { name: '电梯系统', consumption: 156.2, percentage: 12, status: 'high' },
      { name: '办公设备', consumption: 125.4, percentage: 10, status: 'normal' },
      { name: '安防系统', consumption: 93.8, percentage: 8, status: 'normal' },
      { name: '其他设备', consumption: 167.2, percentage: 13, status: 'normal' },
    ],
    hourlyData: [
      { hour: '00:00', consumption: 45.2 },
      { hour: '01:00', consumption: 42.8 },
      { hour: '02:00', consumption: 41.5 },
      { hour: '03:00', consumption: 40.2 },
      { hour: '04:00', consumption: 39.8 },
      { hour: '05:00', consumption: 41.2 },
      { hour: '06:00', consumption: 48.5 },
      { hour: '07:00', consumption: 62.3 },
      { hour: '08:00', consumption: 85.6 },
      { hour: '09:00', consumption: 95.2 },
      { hour: '10:00', consumption: 98.7 },
      { hour: '11:00', consumption: 102.3 },
      { hour: '12:00', consumption: 89.5 },
      { hour: '13:00', consumption: 92.8 },
      { hour: '14:00', consumption: 96.4 },
      { hour: '15:00', consumption: 94.2 },
      { hour: '16:00', consumption: 91.8 },
      { hour: '17:00', consumption: 88.5 },
      { hour: '18:00', consumption: 75.2 },
      { hour: '19:00', consumption: 65.8 },
      { hour: '20:00', consumption: 58.4 },
      { hour: '21:00', consumption: 52.6 },
      { hour: '22:00', consumption: 49.3 },
      { hour: '23:00', consumption: 47.1 },
    ]
  }

  const buildingColumns = [
    {
      title: '建筑名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '能耗 (kWh)',
      dataIndex: 'consumption',
      key: 'consumption',
      render: (value: number) => value.toFixed(1),
    },
    {
      title: '占比',
      dataIndex: 'percentage',
      key: 'percentage',
      render: (value: number) => (
        <Progress 
          percent={value} 
          size="small" 
          format={(percent) => `${percent}%`}
        />
      ),
    },
    {
      title: '变化趋势',
      dataIndex: 'trend',
      key: 'trend',
      render: (trend: string, record: any) => (
        <span style={{ color: trend === 'up' ? '#cf1322' : '#3f8600' }}>
          {trend === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
          {Math.abs(record.change)}%
        </span>
      ),
    },
  ]

  const deviceColumns = [
    {
      title: '设备类型',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '能耗 (kWh)',
      dataIndex: 'consumption',
      key: 'consumption',
      render: (value: number) => value.toFixed(1),
    },
    {
      title: '占比',
      dataIndex: 'percentage',
      key: 'percentage',
      render: (value: number) => `${value}%`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <span style={{ 
          color: status === 'high' ? '#cf1322' : '#3f8600',
          fontWeight: status === 'high' ? 'bold' : 'normal'
        }}>
          {status === 'high' ? '偏高' : '正常'}
        </span>
      ),
    },
  ]

  const hourlyColumns = [
    {
      title: '时间',
      dataIndex: 'hour',
      key: 'hour',
    },
    {
      title: '能耗 (kWh)',
      dataIndex: 'consumption',
      key: 'consumption',
      render: (value: number) => value.toFixed(1),
    },
  ]

  return (
    <Layout>
      <div style={{ padding: '24px' }}>
        {/* 控制面板 */}
        <Card style={{ marginBottom: 24 }}>
          <Row gutter={16} align="middle">
            <Col>
              <span>时间范围：</span>
              <Select 
                value={timeRange} 
                onChange={setTimeRange}
                style={{ width: 120, marginRight: 16 }}
              >
                <Option value="today">今日</Option>
                <Option value="week">本周</Option>
                <Option value="month">本月</Option>
                <Option value="year">本年</Option>
              </Select>
            </Col>
            <Col>
              <span>建筑筛选：</span>
              <Select 
                value={buildingFilter} 
                onChange={setBuildingFilter}
                style={{ width: 150, marginRight: 16 }}
              >
                <Option value="all">全部建筑</Option>
                <Option value="A">A栋办公楼</Option>
                <Option value="B">B栋研发楼</Option>
                <Option value="C">C栋生产车间</Option>
                <Option value="D">D栋仓库</Option>
              </Select>
            </Col>
            <Col>
              <RangePicker style={{ marginRight: 16 }} />
            </Col>
            <Col>
              <Button type="primary">导出报表</Button>
            </Col>
          </Row>
        </Card>

        {/* 统计卡片 */}
        <Row gutter={16} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总能耗"
                value={energyData.total}
                precision={1}
                valueStyle={{ color: '#1890ff' }}
                prefix={<ThunderboltOutlined />}
                suffix="kWh"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="较昨日"
                value={energyData.increase}
                precision={1}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ArrowUpOutlined />}
                suffix="%"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="平均功率"
                value={52.1}
                precision={1}
                valueStyle={{ color: '#3f8600' }}
                suffix="kW"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="碳排放"
                value={875.4}
                precision={1}
                valueStyle={{ color: '#722ed1' }}
                suffix="kg CO₂"
              />
            </Card>
          </Col>
        </Row>

        <Row gutter={16}>
          {/* 建筑能耗分析 */}
          <Col span={12}>
            <Card title="建筑能耗分析" style={{ height: 400 }}>
              <Table
                columns={buildingColumns}
                dataSource={energyData.buildings}
                rowKey="name"
                pagination={false}
                size="small"
              />
            </Card>
          </Col>

          {/* 设备能耗分析 */}
          <Col span={12}>
            <Card title="设备能耗分析" style={{ height: 400 }}>
              <Table
                columns={deviceColumns}
                dataSource={energyData.devices}
                rowKey="name"
                pagination={false}
                size="small"
              />
            </Card>
          </Col>
        </Row>

        {/* 24小时能耗趋势 */}
        <Row style={{ marginTop: 16 }}>
          <Col span={24}>
            <Card title="24小时能耗趋势">
              <div style={{ 
                height: 300, 
                display: 'flex', 
                alignItems: 'end', 
                justifyContent: 'space-between',
                padding: '20px 0'
              }}>
                {energyData.hourlyData.map((item, index) => (
                  <div 
                    key={item.hour}
                    style={{ 
                      display: 'flex', 
                      flexDirection: 'column', 
                      alignItems: 'center',
                      flex: 1
                    }}
                  >
                    <div
                      style={{
                        width: '20px',
                        height: `${(item.consumption / 120) * 200}px`,
                        backgroundColor: '#1890ff',
                        marginBottom: '8px',
                        borderRadius: '2px'
                      }}
                      title={`${item.hour}: ${item.consumption} kWh`}
                    />
                    {index % 4 === 0 && (
                      <span style={{ fontSize: '12px', color: '#666' }}>
                        {item.hour.split(':')[0]}
                      </span>
                    )}
                  </div>
                ))}
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </Layout>
  )
}
